<template>
<div>
  <form action="/" class="search">
  <span class="go-back" @click="clickserarch">返回</span>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <div slot="action" @click="onSearch" class="go-link">搜索</div>
  </form>
  <hr>
  <div class='history'>
     <span class="Recent">最近搜索</span>
     <ul class="record-ul">
       <li>
         <a href="#">
           <span class="record">{{this.txt}}</span>
         </a>
       </li>
     </ul>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      value:'',
      txt:''
    }
  },
  created () {
    this.txt = localStorage.getItem('product')
  },
  methods: {
    onSearch(){
      this.txt = localStorage.setItem('product',this.value)
      console.log(this.product)
      alert('坐等搜索接口')
      this.$router.push({
        name:'home'
      })
    },
    onCancel(){
      this.txt = localStorage.setItem('product',this.value)
      alert('坐等搜索接口')
    },
    clickserarch(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.search{
  display: flex;
  justify-content:space-around
}
.go-back,.go-link{
  width:2.125rem;
  text-align: center;
  line-height:3.375rem;
  font-size:14px;
}
.van-search{
  padding:0;
}
.Recent{
  font-size:0.75rem;
  color:#999999;
}
.record{
  border: 1px solid #cccccc;
  font-size:14px;
  height:1.7rem;
  line-height: 1.7rem;
  display: inline-block;
  margin:10px 0 0 10px;
}
.record-ul{
  display: flex
}
.history{
  padding-left:20px;
}
</style>
